<template>
  <div>
    <h1>Key属性添加到for中</h1>
    <p v-for="(item, index) in names" :key="index">{{ item }}</p>


    <!-- 实际应用中不推荐使用index作为key，因为index会随着数组元素的添加而改变，导致渲染效率下降，应该使用唯一标识符作为key，如id、name等-->
     <!-- ["张三", "李四", "王五", "百战学it"]对应index 0 1 2
      尾部添加元素 不会影响index，不会重新渲染
     但如果在头部添加了元素 那所有的index都会改变 -->
    <div    v-for="item in result" :key="item.id">
        <p>{{ item.name }}</p>
        <img :src="item.avator" alt="">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      names: ["张三", "李四", "王五", "百战学it"],
      result: [
        { 
            id:2201,
            name: "张三", 
        age: 20, 
        avator: "https://img.yzcdn.cn/vant/cat.jpeg" 
    },
        {

             id:2202,
          name: "李四",
          age: 25,
          avator: "https://img.yzcdn.cn/vant/cat.jpeg",
        },
        {

              id:2203,
          name: "wangwu",
          age: 30,
          avator: "https://img.yzcdn.cn/vant/cat.jpeg",
        },
      ],
    };
  },
};
</script>
